<script setup>
import {
  NAvatar,
  NButton,
  NFlex,
  NForm,
  NFormItem,
  NInput,
  NSelect,
  NTabPane,
  NTabs,
  NTreeSelect,
  useMessage
} from "naive-ui";
import api from "@/api";
import {onMounted} from "vue";
import TheIcon from "@/components/icon/TheIcon.vue";
import {renderIcon} from "@/utils";

const message = useMessage()
const props = defineProps({
  infoData: {
    type: Object,
    required: true
  }
});
const data = reactive({
  select_customer: {
    user_id:null,
    name: "未选择",
    card_number: "--",
    user_level_name: "--",
    mobile: "--",
    bi_date: "--",
    sex: "--",
    hkqd: "--",
    age: "--",
    created_at: "--",
    last_come: "--",
    record_hobby: [],
    totals: {
      weimei: 0,
      cdp: 0,
      fujia: 0,
      other: 0,
      buy_money: 0,
      cases: 0,
      appoint_count: 0,
      return_count: 0,
      operation_count: 0,
      face_count: 0,
      test_count: 0,
      having_customers: 0,
      customers_level5: 0

    }
  },
  card_loading: false,
  config:[],
  doctors: [],
  advisers: [],
  rooms: [],
  dep_users: [],
  devices: [],
  appoint_form: {
    id: 0,
    project_id:[],
    project_name:[],
    doctor_id: [],
    adviser_id: [],
    room_id: [],
    test_id:0,
    depusers_id: 0,
    device_id: [],
    appoint_time: null,
    appoint_day: null,
    test_remark:'',
    doctor_remark:'',
    adviser_remark:'',
    depuser_remark:'',
    longs:30
  },
  projects: [],
  tab_now: 1,
  tab_name: ["", "项目", "医生", "顾问", "诊室", "仪器", "导医","护士", "时间", "颜色"],
  searchQuery: "",
  show_fenzhen:false,
  fenzhenForm:{
    type:1,
    remark:"",
    category_id:null,
    shouli_uid:null,
    hkqd:null,
    dckf_uid:null,
    user_id:null
  },
  data_ini:[],
  user_all:[],
  nurses:[],
  appoint_room:[],
  appoint_device:[],
  isDeviceTime:false,
  isRoomTime:false,
});

const emit = defineEmits(['call-parent'])


function timeToMinutes(timeStr) {
  if (!timeStr) return 0;

  // 解析时间（假设格式为 "YYYY-MM-DD HH:mm:ss"）
  const timePart = timeStr.split(' ')[1]; // "12:30:00"
  const [hours, minutes] = timePart.split(':').map(Number);

  // 计算相对于 10:00 的分钟数（例如 12:30 → 2.5 小时 → 150 分钟）
  return (hours - 10) * 60 + minutes;
}



function get_appoint_detail() {
  data.card_loading = true
  api.getAppointmentDetail({
    id: data.appoint_form.id,
  }).then((res) => {
    data.appoint_form = res.data
    data.appoint_form.appoint_time = res.data.appoint_time//这个是时间例如2025-02-01 12:30:00
    data.appoint_form.appoint_day= data.appoint_form.appoint_time.substring(0, 10);
    data.appoint_form.longs = res.data.longs//这个是时长

    // 计算开始时间和结束时间（分钟数）
    const startMinutes = timeToMinutes(data.appoint_form.appoint_time);
    // 更新 selectedRange
    selectedRange.value = [startMinutes, startMinutes+data.appoint_form.longs];
    data.card_loading = false
  })
  return true
}

function tab_now(type) {
  data.tab_now = type
}

function get_config() {
  api.getConfig().then((res) => {
    // data.departments = res.data.deps
    data.rooms = res.data.rooms
    data.config = res.data
  })
  api.get_depusers({
    tab:0
  }).then((res) => {
    data.dep_users = res.data.items
    data.select_dep_loading = false
    return true;
  })
  api.getUserList({
    type: 2
  }).then((res) => {
    data.doctors = res.data
  })
  api.getUserList({
    type: 3
  }).then((res) => {
    data.advisers = res.data
  })
  api.getUserList({
    type: 4
  }).then((res) => {
    data.nurses = res.data
  })
  api.getDeviceList().then((res) => {
    data.devices = res.data
  })
  api.getAppointTime().then((res) => {
    data.appoint_room = res.data.appoint_room
    data.appoint_device	 = res.data.appoint_device
  })
  api.getProjectsAllTree().then((res) => (data.projects = res.data))
}

function select_project(item) {
  // data.appoint_form.project_name = item.name
  // data.appoint_form.project_id = item.id
  if (data.appoint_form.project_id.includes(item.id)) {
    data.appoint_form.project_id = data.appoint_form.project_id.filter(id => id !== item.id);
    data.appoint_form.project_name = data.appoint_form.project_name.filter(name => name !== item.name);
  } else {
    data.appoint_form.project_id.push(item.id);
    data.appoint_form.project_name.push(item.name);
  }
}

function select_doctor(item) {
  if (data.appoint_form.doctor_id.includes(item.id)) {
    data.appoint_form.doctor_id = data.appoint_form.doctor_id.filter(id => id !== item.id);
  } else {
    data.appoint_form.doctor_id.push(item.id);
  }
}

function select_adviser(item) {
  if (data.appoint_form.adviser_id.includes(item.id)) {
    data.appoint_form.adviser_id = data.appoint_form.adviser_id.filter(id => id !== item.id);
  } else {
    data.appoint_form.adviser_id.push(item.id);
  }
}

function select_room(item) {
  if (data.appoint_form.room_id.includes(item.id)) {
    data.appoint_form.room_id = data.appoint_form.room_id.filter(id => id !== item.id);
  } else {
    data.appoint_form.room_id.push(item.id);
  }
}

function select_device(item) {
  if (data.appoint_form.device_id.includes(item.id)) {
    data.appoint_form.device_id = data.appoint_form.device_id.filter(id => id !== item.id);
  } else {
    data.appoint_form.device_id.push(item.id);
  }
}

function select_depusers(item) {
  data.appoint_form.depusers_id = item.id
}

function select_test(item) {
  data.appoint_form.test_id = item.id
}

function edit_appoint() {
  api.editAppointment(data.appoint_form).then((res) => {
    message.success('编辑成功')
    emit('call-parent')
  })
}

function again_appoint() {
  data.appoint_form.user_id = props.infoData.user_id
  api.createAppointment(data.appoint_form).then((res) => {
    message.success('再约成功')
    emit('call-parent')
  })
}

function on_arrive() {
  api.arriveAppointment({
    id: data.appoint_form.id,
  }).then((res) => {
    message.success('签到成功')
    emit('call-parent')
  })
}

function on_cancel() {
  api.deleteAppointment({
    id: data.appoint_form.id,
  }).then((res) => {
    message.success('已经取消预约')
    emit('call-parent')
  })
}

function filterChildren(children) {
  if (!data.searchQuery) return children
  const query = data.searchQuery.toLowerCase()
  return children.filter(child =>
      child.name.toLowerCase().includes(query)
  )
}

// 计算当前时间对应的分钟数
const getCurrentMinutes = () => {
  const now = new Date();
  const currentHour = now.getHours();
  const currentMinute = now.getMinutes();

  // 如果当前时间不在10:00-22:00范围内，则返回边界值
  if (currentHour < 10) return 0;
  if (currentHour >= 22) return 720;

  // 计算从10:00开始的分钟数
  return (currentHour - 10) * 60 + currentMinute;
};

// 初始值设置为当前时间到当前时间+2小时
const currentMinutes = getCurrentMinutes();
const selectedRange = ref([currentMinutes, Math.min(currentMinutes + 120, 720)]);

// 生成时间刻度标记
const timeMarks = computed(() => {
  const marks = {};
  for (let i = 0; i <= 12; i++) {
    const minutes = i * 60;
    marks[minutes] = `${10 + i}:00`;
  }
  return marks;
});

// 计算时长（分钟）
const duration = computed(() => {
  return selectedRange.value[1] - selectedRange.value[0];
});

// 格式化工具提示
const formatTooltip = (minutes) => {
  return formatTime(minutes);
};

// 格式化分钟数为时间字符串
const formatTime = (minutes) => {
  const totalMinutes = minutes;
  const hours = Math.floor(totalMinutes / 60) + 10; // 从10点开始
  const mins = totalMinutes % 60;
  return `${hours.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}`;
};

// 处理变化
const handleChange = (value) => {
  let start= data.appoint_form.appoint_day+' '+formatTime(value[0])
  let end= data.appoint_form.appoint_day+' '+formatTime(value[1])
  data.isRoomTime= false
  data.isDeviceTime= false
  let RoomStatus = []
  let DeviceStatus = []
  data.appoint_form.room_id.forEach(item=>{
    data.appoint_room.forEach(item1=>{
      if(item1.room_id === item){
        item1.time.forEach(item2=>{
          // 所有诊室的预约状态
          RoomStatus.push(item2[0] <= end && start >= item2[1])
        })
      }
    })
  })
  data.appoint_form.device_id.forEach(item=>{
    data.appoint_device.forEach(item1=>{
      if(item1.device_id === item){
        item1.time.forEach(item2=>{
          DeviceStatus.push(item2[0] <= end && start >= item2[1])
        })
      }
    })
  })
  if(data.appoint_form.room_id.length>0){
    const isExist = data.appoint_room.some(item => data.appoint_form.room_id.includes(item.room_id));
    if(RoomStatus.includes(false) && isExist){
      message.info('当前选择诊室存在预约时间重叠',{ duration: 1000 })
    }
  }
  if(data.appoint_form.device_id.length>0) {
    const isExist = data.appoint_device.some(item => data.appoint_form.device_id.includes(item.device_id));
    if (DeviceStatus.includes(false) && isExist) {
      message.info('当前选择仪器存在预约时间重叠', {duration: 1000})
    }
  }
  data.appoint_form.appoint_time = `${data.appoint_form.appoint_day} ${formatTime(value[0])}`;
  data.appoint_form.longs = duration;
};

onMounted(() => {
  data.appoint_form.id = props.infoData.id
  get_appoint_detail()
  get_config()
})

function on_fenzhen(){
  api.getProjectIni().then((res) => (data.data_ini = res.data))
  api.getUserList().then((res) => {
      data.user_all = res.data
    })
  data.show_fenzhen =true
}

function save_fenzhen(){
  data.fenzhenForm.user_id = props.infoData.user_id
  if(data.fenzhenForm.shouli_uid===null){
    message.warning("请选择咨询顾问")
    return
  }
  api.createFenzhen(data.fenzhenForm).then((res) => {
    message.success('添加成功')
    data.show_fenzhen=false
  })
}

</script>

<template>
  <NScrollbar style="position:relative;height:calc(100vh - 106px);padding-bottom: 60px">
    <n-spin :show="data.card_loading" style="--n-opacity-spinning:0.1;height: calc(100vh - 225px);">
      <n-card size="small" content-style="padding: 0px;" :bordered="false"
              :segmented="{content: true,footer: 'soft',}">
        <template #header>
          <n-h6 prefix="bar" style="margin: 0;font-size: 18px">预约详情</n-h6>
        </template>
        <div class="info11">

          <div class="data_card" style="background: rgba(103,54,126,0.8);" @click="tab_now(1)">
            <span class="tag">预约项目</span>
            <div class="con" >
              <div class="doctor" v-if="data.appoint_form.project_id.length>0" v-for="item in data.appoint_form.project_name">
                <n-avatar class="doctor_avatar" round size="small"
                          src="https://sass-files.njqianyan.cn//saas/zoQ9He86SsdBWHdvObmm0890iuB7fa9q8rg9Ha68.webp"/>
                {{ item }}
              </div>
              <div v-else style="color: #fff">未选择</div>
            </div>
          </div>

          <div class="data_card" @click="tab_now(2)">
            <span class="tag">预约医生</span>
            <div class="con">
              <div class="doctor" v-for="item in data.doctors.filter(i => data.appoint_form.doctor_id.includes(i.id))"
                   v-if="data.appoint_form.doctor_id.length>0">
                <n-avatar class="doctor_avatar" round size="small"
                          :src="item.avatar"/>
                {{ item.name }}
              </div>
              <div v-else style="color: #fff">未选择</div>
            </div>
          </div>

          <div class="data_card" @click="tab_now(3)" style="background: rgba(123,79,146,0.8);">
            <span class="tag">预约顾问</span>
            <div class="con">
              <div class="doctor" v-for="item in data.advisers.filter(i => data.appoint_form.adviser_id.includes(i.id))"
                   v-if="data.appoint_form.adviser_id.length>0">
                <n-avatar class="doctor_avatar" round size="small"
                          :src="item.avatar"/>
                {{ item.name }}
              </div>
              <div v-else style="color: #fff">未选择</div>
            </div>
          </div>

          <div class="data_card" @click="tab_now(4)" style="background: rgba(146,82,121,0.8);">
            <span class="tag">预约诊室</span>
            <div class="con">
              <div class="doctor" v-for="item in data.rooms.filter(i => data.appoint_form.room_id.includes(i.id))"
                   v-if="data.appoint_form.room_id.length>0">
                <n-avatar class="doctor_avatar" round size="small"
                          src="https://sass-files.njqianyan.cn//saas/zoQ9He86SsdBWHdvObmm0890iuB7fa9q8rg9Ha68.webp"/>
                {{ item.name }}
              </div>
              <div v-else style="color: #fff">未选择</div>
            </div>
          </div>

          <div class="data_card" @click="tab_now(5)" style="background: rgba(80,79,146,0.8);">
            <span class="tag">预约仪器</span>
            <div class="con">
              <div class="doctor"
                   v-for="item in data.devices.filter(i => data.appoint_form.device_id.includes(i.id))"
                   v-if="data.appoint_form.device_id.length>0">
                <n-avatar class="doctor_avatar" round size="small"
                          src="https://sass-files.njqianyan.cn//saas/zoQ9He86SsdBWHdvObmm0890iuB7fa9q8rg9Ha68.webp"/>
                {{ item.name }}
              </div>
              <div v-else style="color: #fff">未选择</div>
            </div>
          </div>

          <div class="data_card" @click="tab_now(6)" style="background: rgba(101,82,146,0.8);">
            <span class="tag">预约导医</span>
            <div class="con">
              <div class="doctor"
                   v-if="data.appoint_form.depusers_id>0">
                <n-avatar class="doctor_avatar" round size="small"
                  :src="data.dep_users.find(u => u.id === data.appoint_form.depusers_id)?.avatar || ''"/>
                  {{ data.dep_users.find(u => u.id === data.appoint_form.depusers_id)?.name || '未命名' }}
              </div>
              <div v-else style="color: #fff">未选择</div>
            </div>
          </div>
          <div class="data_card" @click="tab_now(7)" style="background: rgba(101,82,146,0.8);">
            <span class="tag">预约护士</span>
            <div class="con">
              <div class="doctor"
                   v-if="data.appoint_form.test_id>0">
                <n-avatar class="doctor_avatar" round size="small"
                  :src="data.nurses.find(d => d.id === data.appoint_form.test_id)?.avatar || ''"/>
                {{ data.nurses.find(d => d.id === data.appoint_form.test_id)?.name || '未命名' }}
              </div>
              <div v-else style="color: #fff">未选择</div>
            </div>
          </div>

          <div class="data_card" @click="" :style="'background:'+data.appoint_form.color">
            <span class="tag">卡片颜色</span>
            <div class="con">
              <div class="doctor">
               <n-color-picker :modes="['hex']" style="width: 80px;height:100%" v-model:value="data.appoint_form.color"/>
              </div>
            </div>
          </div>
        </div>
      </n-card>
      <n-card size="small" :bordered="false"
                    :segmented="{content: true,footer: 'soft',}">
              <template #header>
                <n-h6 prefix="bar" style="margin: 0;font-size: 18px">请选择{{ data.tab_name[data.tab_now] }}</n-h6>
              </template>
              <div v-show="data.tab_now===1">
                <n-tabs type="line" animated placement="left" :default-value="1">
                  <template #prefix>
                    <n-input
                        v-model:value="data.searchQuery"
                        placeholder="搜索"
                        clearable
                        style="width: 100px; "
                        size="small"
                    >
                    </n-input>
                  </template>

                  <n-tab-pane :name="item.id" :tab="item.name" v-for="item in data.projects">
                    <div class="info11" style="padding: 0;">
                      <div :class="data.appoint_form.project_id.includes(item2.id)?'data_card2_check':'data_card2'"
                           v-for="item2 in filterChildren(item.children)" @click="select_project(item2)">
                        <div class="con" style=";padding:5px 10px">
                          <n-avatar class="doctor_avatar" style="border-radius: 50%;width: 35px;height:35px" size="small"
                                    src="https://sass-files.njqianyan.cn//saas/zoQ9He86SsdBWHdvObmm0890iuB7fa9q8rg9Ha68.webp"/>
                          {{ item2.name }}
                        </div>
                      </div>
                    </div>
                  </n-tab-pane>
                </n-tabs>
              </div>
              <div v-show="data.tab_now===2">
                <div class="info11" style="padding: 0;">
                  <div :class="data.appoint_form.doctor_id.includes(item.id)?'data_card2_check':'data_card2'"
                       v-for="item in data.doctors" @click="select_doctor(item)">
                    <div class="con" style="font-size: 16px;padding:10px 20px">
                      <n-avatar class="doctor_avatar" style="border-radius: 50%;width: 35px;height:35px" size="small"
                                :src="item.avatar"/>
                      {{ item.name }}
                    </div>
                  </div>
                </div>
                <n-input :placeholder="data.tab_name[data.tab_now]+'备注'" v-model:value="data.appoint_form.doctor_remark" style="width: 100%;margin-right: 10px;margin-top: 10px"/>
              </div>
              <div v-show="data.tab_now===3">
                <div class="info11" style="padding: 0;">
                  <div :class="data.appoint_form.adviser_id.includes(item.id)?'data_card2_check':'data_card2'"
                       v-for="item in data.advisers" @click="select_adviser(item)">
                    <div class="con" style="font-size: 16px;padding:10px 20px">
                      <n-avatar class="doctor_avatar" style="border-radius: 50%;width: 35px;height:35px" size="small"
                                :src="item.avatar"/>
                      {{ item.name }}
                    </div>
                  </div>
                </div>
                <n-input :placeholder="data.tab_name[data.tab_now]+'备注'" v-model:value="data.appoint_form.adviser_remark" style="width: 100%;margin-right: 10px;margin-top: 10px"/>
              </div>
              <div v-show="data.tab_now===4">
                <div class="info11" style="padding: 0;">
                  <div :class="data.appoint_form.room_id.includes(item.id)?'data_card2_check':'data_card2'"
                       v-for="item in data.rooms" @click="select_room(item)">
                    <div class="con" style="font-size: 16px;padding:10px 20px">
                      <n-avatar class="doctor_avatar" style="border-radius: 50%;width: 35px;height:35px" size="small"
                                src="https://sass-files.njqianyan.cn//saas/zoQ9He86SsdBWHdvObmm0890iuB7fa9q8rg9Ha68.webp"/>
                      {{ item.name }}
                    </div>
                  </div>
                </div>
              </div>
              <div v-show="data.tab_now===5">
                <div class="info11" style="padding: 0;">
                  <div :class="data.appoint_form.device_id.includes(item.id)?'data_card2_check':'data_card2'"
                       v-for="item in data.devices" @click="select_device(item)">
                    <div class="con" style="font-size: 16px;padding:10px 20px">
                      <n-avatar class="doctor_avatar" round size="small"
                                src="https://sass-files.njqianyan.cn//saas/zoQ9He86SsdBWHdvObmm0890iuB7fa9q8rg9Ha68.webp"/>
                      {{ item.name }}
                    </div>
                  </div>
                </div>
              </div>
              <div v-show="data.tab_now===6">
                <div class="info11" style="padding: 0;">
                  <div :class="data.appoint_form.depusers_id===item.id?'data_card2_check':'data_card2'" v-for="item in data.dep_users" @click="select_depusers(item)">
                    <div class="con" style="font-size: 16px;padding:10px 20px">
                      <n-avatar class="doctor_avatar" style="border-radius: 50%;width: 35px;height:35px" size="small"
                                :src="item.avatar"/>
                      {{ item.name }}
                    </div>
                  </div>
                </div>
                <n-input :placeholder="data.tab_name[data.tab_now]+'备注'" v-model:value="data.appoint_form.depuser_remark" style="width: 100%;margin-right: 10px;margin-top: 10px"/>
              </div>
              <div v-show="data.tab_now===7">
                <div class="info11" style="padding: 0;">
                  <div :class="data.appoint_form.test_id===item.id?'data_card2_check':'data_card2'" v-for="item in data.nurses" @click="select_test(item)">
                    <div class="con" style="font-size: 16px;padding:10px 20px">
                      <n-avatar class="doctor_avatar" style="border-radius: 50%;width: 35px;height:35px" size="small"
                                :src="item.avatar"/>
                      {{ item.name }}
                    </div>
                  </div>
                </div>
                <n-input :placeholder="data.tab_name[data.tab_now]+'备注'" v-model:value="data.appoint_form.test_remark" style="width: 100%;margin-right: 10px;margin-top: 10px"/>
              </div>
            </n-card>
      <n-card size="small" :bordered="false" :segmented="{content: true,footer: 'soft',}" style="width: 100%;" v-if="data.tab_now>1">
              <template #header>
                <n-h6 prefix="bar" style="margin: 0;font-size: 18px">请选择时长</n-h6>
              </template>

        <div class="time-range-selector">

          <div class="time-display" style="display: flex;align-items: center">
            <n-date-picker v-model:formatted-value="data.appoint_form.appoint_day" type="date" clearable style="width:200px"/>
            &nbsp;&nbsp;
            <n-text strong>{{ formatTime(selectedRange[0]) }}</n-text>
            &nbsp;&nbsp;<n-text> 至 </n-text>&nbsp;&nbsp;
            <n-text strong>{{ formatTime(selectedRange[1]) }}</n-text>&nbsp;&nbsp;
            <n-text> (时长: {{ duration }}分钟)</n-text>

          </div>

          <n-slider  v-model:value="selectedRange" range :min="0" :max="720" :step="10" :marks="timeMarks" :format-tooltip="formatTooltip" @update:value="handleChange"/>

  </div>

      </n-card>

    </n-spin>
    <div
        style="position: absolute;bottom:0;right:0;width:100%;height:60px;background: #f3f3f3;z-index: 99;display: flex;align-items: center">
      <n-button type="primary" size="large" style="margin-left:10px" @click="edit_appoint">
        <TheIcon icon="material-symbols:save-sharp" :size="18" class="mr-5"/>
        修改预约
      </n-button>
      <n-popconfirm @positive-click="on_cancel">
        <template #trigger>
          <n-button type="error" size="large" style="margin-left:10px">
            <TheIcon icon="material-symbols:contract-delete" :size="18" class="mr-5"/>
            取消预约
          </n-button>
        </template>
        确定要取消预约吗？
      </n-popconfirm>

       <n-popconfirm @positive-click="again_appoint">
        <template #trigger>
          <n-button type="primary" size="large" style="margin-left:10px">
            <TheIcon icon="material-symbols:assignment-add-outline" :size="18" class="mr-5"/>
        再约
          </n-button>
        </template>
        确定要再约吗？
      </n-popconfirm>

      <n-button type="info" size="large" style="margin-left:10px" @click="on_arrive">
        <TheIcon icon="material-symbols:app-registration-sharp" :size="18" class="mr-5"/>
        签到
      </n-button>

<!--      <n-button type="primary" size="large" style="margin-left:10px" @click="on_fenzhen">-->
<!--        <TheIcon icon="material-symbols:grid-view-rounded" :size="18" class="mr-5"/>-->
<!--        分诊-->
<!--      </n-button>-->





    </div>
  </NScrollbar>

 <n-modal v-model:show="data.show_fenzhen" preset="dialog" title="Dialog">
    <template #header>
      <div>分诊添加</div>
    </template>
    <NForm
              label-placement="left"
              label-align="left"
              :label-width="80"
              :model="data.fenzhenForm"
              style="margin-top: 20px"
          >

<!--            <NFormItem label="分诊类型" path="type">-->
<!--              <n-radio-group v-model:value="data.fenzhenForm.type" name="radiogroup">-->
<!--                <n-space>-->
<!--                  <n-radio :value="item.id" v-for="item in data.config.fenzhen_type">{{item.name}}</n-radio>-->
<!--                </n-space>-->
<!--              </n-radio-group>-->
<!--            </NFormItem>-->

<!--            <NFormItem label="咨询项目" path="category_id">-->
<!--                  <n-tree-select-->
<!--                    v-model:value="data.fenzhenForm.category_id"-->
<!--                    :options="data.data_ini.category_id"-->
<!--                    placeholder="请选择类型"-->
<!--                    label-field="name"-->
<!--                    key-field="id"-->
<!--                    children-field="child"-->
<!--                    checkable-->
<!--                    filterable-->
<!--                  />-->
<!--            </NFormItem>-->

            <NFormItem label="咨询顾问" path="shouli_uid">
              <NSelect
                  v-model:value="data.fenzhenForm.shouli_uid"
                  :options="data.user_all"
                  placeholder="请选择咨询顾问"
                  label-field="name"
                  value-field="id"
                  filterable
              />
            </NFormItem>

<!--            <NFormItem label="当次来源" path="hkqd">-->
<!--                  <NSelect-->
<!--                     v-model:value="data.fenzhenForm.hkqd"-->
<!--                     :options="data.config.hkqd"-->
<!--                     placeholder="请选择当次来源"-->
<!--                     label-field="name"-->
<!--                     value-field="name"-->
<!--            />-->
<!--            </NFormItem>-->

<!--            <NFormItem label="当次开发" path="dckf_uid">-->
<!--                  <NSelect-->
<!--                     v-model:value="data.fenzhenForm.dckf_uid"-->
<!--                     :options="data.user_all"-->
<!--                     placeholder="请选择当次开发"-->
<!--                     label-field="name"-->
<!--                     value-field="id"-->
<!--                     filterable-->
<!--            />-->
<!--            </NFormItem>-->




<!--            <NFormItem label="受理情况" path="remark">-->
<!--              <NInput-->
<!--                  type="textarea"-->
<!--                v-model:value="data.fenzhenForm.remark"-->
<!--                clearable-->
<!--                placeholder="请输入受理情况"-->
<!--              />-->
<!--            </NFormItem>-->
          </NForm>
    <template #action>
     <n-button type="primary" size="large" @click="save_fenzhen">
                  <TheIcon icon="material-symbols:add" :size="18" class="mr-5"/>
                  保存
                </n-button>
    </template>
  </n-modal>





</template>

<style scoped>
:deep(.n-color-picker-trigger){
  border:0 !important;
}
:deep(.n-slider .n-slider-handles .n-slider-handle-wrapper .n-slider-handle){
  height: 30px;
  width: 30px;
  background:  rgba(103,54,126,1);
  border:0;
}

.time-display {
  margin-bottom: 20px;
  font-size: 16px;
}

/* 自定义滑块样式 */
:deep(.n-slider-rail) {
  background-color: #e0e0e0;
}

:deep(.n-slider-fill) {
  background-color: #4CAF50;
}

:deep(.n-slider-mark) {
  font-size: 12px;
  color: #666;
  top: 20px;
}

:deep(.n-slider-handle) {
  border: 2px solid #4CAF50;
}
.info11 {
  width: 100%;
  padding: 20px;
  display: flex;
  flex-wrap: wrap; /* 子元素自动换行 */

  .data_card2 {
    margin-right: 10px;
    background: #f7f7fa;
    color: #504f4f;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 5px;
    cursor: pointer;

    .con {
      display: flex;
      align-items: center;
      margin-right: 5px;
      font-size: 12px;
      padding: 2px 2px;

      .doctor_avatar {
        width: 20px;
        height: 20px;
        border: 1px solid #fff;
        margin-right: 5px;
      }
    }
  }

  .data_card2_check {
    cursor: pointer;
    margin-right: 10px;
    background: rgba(103, 54, 126, 0.8);;
    color: #fff;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 5px;

    .con {
      display: flex;
      align-items: center;
      margin-right: 5px;
      font-size: 12px;
      padding: 2px 2px;

      .doctor_avatar {
        width: 20px;
        height: 20px;
        border: 1px solid #fff;
        margin-right: 5px;
      }
    }
  }

  .data_card {
    margin-right: 20px;
    background: rgba(200, 115, 115, 0.8);
    color: #fff;
    border-radius: 5px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-width: 100px;
    cursor: pointer;

    .tag {
      font-size: 12px;
      color: #fff;
      font-weight: normal;
      position: absolute;
      left: 2px;
      top: 2px;
      background: #f86c95;
      border-radius: 2px;
      padding: 2px 4px;
    }

    .con {
      line-height: 20px;
      font-size: 16px;
      color: rgba(200, 115, 115, 1);
      padding: 10px;
      margin-top: 20px;
      display: flex;

      .doctor {
        height: 40px;
        display: flex;
        align-items: center;
        margin-right: 10px;
        color: #fff;

        .doctor_avatar {
          width: 30px;
          height: 30px;
          border: 1px solid #fff;
          margin-right: 5px;
        }
      }


    }
  }
}
</style>